<template>
  <div id="map">
    <h3>所在位置</h3>
    <div id="r-result">
      <label for="suggestId" class="labels">请输入:</label>
      <input type="text" id="suggestId" size="20" value="百度" />
      <div
        id="searchResultPanel"
        style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;z-index:999998888"
      ></div>
    </div>
    <div class="getjwd">
      <label for="jwd" class="jwd">经纬度:</label>
      <input type="text" name id="jwd" readonly v-model="jwd" />
    </div>
    <div id="allmap"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jwd: "1",
    };
  },
  methods: {
    //地图
    mymap() {
      // 百度地图API功能
      function G(id) {
        return document.getElementById(id);
      }
      var map = new BMap.Map("allmap"); // 创建Map实例
      console.log(map);
      map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。
      var ac = new BMap.Autocomplete({
        //建立一个自动完成的对象
        input: "suggestId",
        location: map,
      });

      ac.addEventListener("onhighlight", function (e) {
        //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        G("searchResultPanel").innerHTML = str;
      });

      var myValue;
      ac.addEventListener("onconfirm", function (e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        G("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;

        setPlace();
      });

      function setPlace() {
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          map.centerAndZoom(pp, 18);
          map.addOverlay(new BMap.Marker(pp)); //添加标注
        }
        var local = new BMap.LocalSearch(map, {
          //智能搜索
          onSearchComplete: myFun,
        });
        local.search(myValue);
      }

      // 点击地图获取当前经纬度
      var geoc = new BMap.Geocoder();
      map.addEventListener("click", function (e) {
        var that = this;
        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
        var pt = e.point;
        geoc.getLocation(pt, function (rs) {
          //addressComponents对象可以获取到详细的地址信息
          var addComp = rs.addressComponents;
          var site =
            addComp.province +
            ", " +
            addComp.city +
            ", " +
            addComp.district +
            ", " +
            addComp.street +
            ", " +
            addComp.streetNumber;
          //将对应的HTML元素设置值
          console.log(site);
          console.log(pt.lng + "," + pt.lat);
          console.log(that.jwd);
          document.getElementById("jwd").value = pt.lng + "," + pt.lat;
        });
      });
    },
  },
  mounted() {
    this.mymap();
  },
};
</script>
<style  scoped>
#allmap {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
.tangram-suggestion-main {
  z-index: 9999999;
}
#r-result,
.getjwd {
  height: 35px;
  position: relative;
  display: inline-block;
}

.labels,
.jwd {
  width: 100px;
  line-height: 36px;
  display: inline-block;
  text-align: right;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
#suggestId,
.getjwd > input {
  width: 300px;
  height: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: none;
  padding: 0 15px;
  box-sizing: border-box;
}
#searchResultPanel {
  position: absolute;
}
</style>